<%@ page language="java" pageEncoding="UTF-8"%>

<%@ include file="../back-common.jsp"%>
<%@ include file="/WEB-INF/pages/common/taglib.jsp"%>
<%@ include file="/WEB-INF/pages/common/dialog.jsp"%>
    <script type='text/javascript' src="<ls:templateResource item='/resources/plugins/ztree/jquery.ztree.core-3.5.min.js'/>"></script>
	<script type='text/javascript' src="<ls:templateResource item='/resources/plugins/ztree/jquery.ztree.excheck-3.5.js'/>"></script>
	<script type='text/javascript' src="<ls:templateResource item='/resources/plugins/ztree/jquery.ztree.exedit-3.5.js'/>"></script>
	<link type="text/css" rel="stylesheet"  href="<ls:templateResource item='/resources/plugins/ztree/zTreeStyle.css'/>" >
	<style type="text/css">
	div.content_wrap {width: 100%;height:90%;}
	div.content_wrap div.left{float: left; padding:10px 0px 50px 20px}
	div.content_wrap div.right{float: right;}
	div.deptInfoBackground{ background:#f5f5f5; width:70%;height:100%;text-align:center;}
	div.zTreeBackground { min-width:15%;height:100%;text-align:left;background:#f5f5f5 }
	div.deptEditBackground{ background-color:white;border:1px solid;width:33%;height:300px;display:none;position: absolute;z-index:11;top:33%;left:33%;}
	
	.ztree * { /*font-size: 12pt;*/ background：#f5f5f5;}
	.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
	.ztree li span.button.switch.level0 {visibility:hidden; width:1px;}
	.ztree li ul.level0 {padding:0; background:none;}

	</style>

    <form:form  action="${contextPath}/admin/department/query" id="form1" method="post">
    <table  class="${tableclass}" style="width: 100%">
	    <thead>
	    	<tr><th><a href="<ls:url address='/admin/index'/>" target="_parent">首页</a> &raquo; 权限管理  &raquo; <a href="${contextPath}/admin/department/query">部门管理</a> </th></tr>
	    </thead>
	</table>
    </form:form>

 <div class="content_wrap" align="center" style="width:95%; height:100%">
	    
	    <div align="center" style="margin-left:30px; height:100%; float: left; " >
	    	<div id="treeDiv" class="zTreeBackground left" style="border: 1px solid #ddd; background：#f5f5f5;width:220px;">
		    	<ul id="deptTree" class="ztree"></ul>
		    </div>
	    </div>
	    
	    <div align="center" style="float:left;">
	        <div id="infoDiv" style="width:400px;margin-left:20px;background:#f8f8f8; padding:20px 20px; border:solid 1px #e8e8e8;text-align: left;">
	        	<div class="line"><label>部门名称：</label><span class="info" id="deptName">${dept.name}</span></div>
	        	<div class="line"><label>部门联系人：</label><span class="info" id="deptContact">${dept.contact}</span></div>
	        	<div class="line"><label>部门电话：</label><span class="info" id="deptMobile">${dept.mobile}</span></div>
	        	${dept.recDate}
	        	<div class="line"><label>记录时间：</label><span class="info" id="recDate"><fmt:formatDate value="${dept.recDate}" pattern="yyyy-MM-dd HH:mm" /> </span></div> 
		     </div>
		</div>

    </div>

	<script type="text/javascript">

		var freeze = false;
		var setting = {
			view: {
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
				selectedMulti: false
			},
			edit: {
				enable: true,
				editNameSelectAll: true,
				showRemoveBtn: showRemoveBtn,
				showRenameBtn: showRenameBtn,
				removeTitle: "删除部门",
				renameTitle: "编辑信息"
			},
			drag: {
				isCopy:false,
				isMove:true
			},
			data: {
				simpleData: {
					enable: true,
					pIdKey: "parentId"
				}
			},
			callback: {
				beforeDrag: beforeDrag,
				beforeDrop: beforeDrop,
				beforeRemove: beforeRemove,
				beforeEditName: beforeRename,
				onClick: onClick
			}
		};
		// 初始化按钮
		function showRemoveBtn(treeId, treeNode) {
			return treeNode.level > 0;
		}
		function showRenameBtn(treeId, treeNode) {
			return treeNode.level >= 0;
		}
		function addHoverDom(treeId, treeNode) {
			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
			var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
				+ "' title='增加子部门' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			var btn = $("#addBtn_"+treeNode.tId);
			
			if (btn) btn.bind("click", function(){
			    freeze = true;
				addDept(treeNode);
			});
		}
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_"+treeNode.tId).unbind().remove();
		}
		// 响应事件
		function beforeDrag(treeId, treeNodes) {
			freeze = true;
			
			return treeNodes[0].level > 0;
		}
		function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
			freeze = true;
			
			if( moveType != "inner" ) return false;
			
			var operation = "确定要将 " + treeNodes[0].name + " 移动到 " + targetNode.name + " 吗";
			art.dialog.confirm(  operation, function(){ editPid(treeNodes[0],targetNode); } );
			
		    return false;
		}
		function beforeRemove(treeId, treeNode) {
			freeze = true;
			
			if(treeNode.isParent){
				art.dialog.alert("该部门有子部门，无法直接删除");
				return false;
			}
			
			var operation = "确认删除部门 ： " + treeNode.name + " 吗？";
			art.dialog.confirm(  operation, function(){ delDept(treeNode); } );
			return false;
		}
		function beforeRename(treeId, treeNode) {
			freeze = true;
			editDept(treeNode);
			return false;
		}
		
		function onClick( event, treeId, treeNode){
			setTimeout(function(){
				if(!freeze){
					showDept( treeNode );
				}
				freeze = false;
			},150);
		}
		function showDept(deptInfo){
        	var lastInfo = 	deptInfo.lastModify == undefined ?  deptInfo : deptInfo.lastModify ;
		    $("#deptName").html(lastInfo.name);
			$("#deptContact").html(lastInfo.contact);
			$("#deptMobile").html(lastInfo.mobile);
			var recDate = new Date(lastInfo.recDate);
			$("#recDate").html(recDate.getFullYear() + "-" + (recDate.getMonth()+1) + "-" +recDate.getDate() + " " + recDate.getHours() + ":" + recDate.getMinutes());
    	}
		
		// 处理函数
    	function editPid(thisDept,parentDept) {
		    $.ajax({
				url: "${contextPath}/admin/dept/updatePid", 
				data: {"id":thisDept.id,"pid":parentDept.id},
				type:'post',
				async : true,
				dataType : 'json', 
				error:function(XMLHttpRequest, textStatus, errorThrown){
					art.dialog.alert(errorThrown);
				},   
				success:function(data){
					if(data == "OK"){
						var zTree = $.fn.zTree.getZTreeObj("deptTree");
											
						thisDept.pId = parentDept.id;
						if( thisDept.lastModify != undefined )
							thisDept.lastModify.pId = parentDept.id;
							
						zTree.moveNode( parentDept, thisDept, "inner");
					}else{
						art.dialog.alert(data);
					}
				}
			});
		}
    	function delDept(thisDept) {
		    $.ajax({
				url: "${contextPath}/admin/department/deleteDept", 
				data: {"id":thisDept.id},
				type:'post', 
				async : true,
				dataType : 'json', 
				error:function(XMLHttpRequest, textStatus, errorThrown){
					art.dialog.alert(errorThrown);
				},
				success:function(data){
					if(data == "OK"){
						var zTree = $.fn.zTree.getZTreeObj("deptTree");
						zTree.removeNode( thisDept, false );
					}else{
						art.dialog.alert(data);
					}
				}
			});
		}
		
		// 增加子部门与编辑信息的工作外包给对话框
	    function addDept( parentDept ){
	    	showDlg( parentDept, false );
	    }
    
	    function editDept( thisDept ){
	    	showDlg( thisDept, true );
	    }
	    
	    /** 回调函数 **/
	    function dlgCallback( data, isEdit ){
	    
	    	var success = false;
	        var zTree = $.fn.zTree.getZTreeObj("deptTree");
    		if( isEdit ){
    			var newInfo = eval("(" + eval("(" + data + ")")+ ")");
              	var oldInfo = zTree.getNodeByParam("id", newInfo.id); 	
              	if( oldInfo != undefined ){
              		success = true;
              		oldInfo.lastModify = newInfo;
              		oldInfo.name = oldInfo.lastModify.name;
              		zTree.updateNode(oldInfo);
              	}
	    	}else{
    			var newDept = eval("(" + eval("(" + data + ")")+ ")");
    			var parent = zTree.getNodeByParam("id", newDept.parentId);
    			if( typeof(newDept) == "object" ){
    				success = true;
    				zTree.addNodes(parent, newDept);
    			}
	    	}
    		if( !success ){
    			art.dialog.alert(data);
			}
	    }
	    
	    /**
	      编辑部门
	    */
		 function showDlg( deptInfo, toEdit ){
	   
	    	var page = "${contextPath}/admin/department";
	    	var conf = { width:400, height:300, lock:true,
	    				 background:'#000', opacity:0.5 };
	    		
	    	if( toEdit ){
	    		page += "/editDept/" + deptInfo.id;
	    		conf.title = "编辑部门";
	    		conf.id = "Edit";
	    	}else{
	    		page += "/addDept/" + deptInfo.id;
	    		conf.title = "新增部门";
	    		conf.id = "Add";
	    	}
			art.dialog.open( page, conf );
			
	    }
	    
	function selAll(){
		var title = document.getElementsByName("checkbox")[0];
		var allSel = document.getElementsByName("strArray");
		for(i=0;i<allSel.length;i++){
			   allSel[i].checked = title.checked;
		}
		selectCheckboxItem();
	}
	
	function getcheckIds(){

    	var selAry = document.getElementsByName("strArray");
    	var checkIds = new Array(); 
    	for(i=0;i<selAry.length;i++){
    		if(selAry[i].checked){
				 checkIds.push( "'" + selAry[i].value +"'" );
		    }
    	}
    	// console.debug("选择的权限资源Ids:"+ checkIds);
   		return checkIds;
	}

	function saveSel(id){
	
		var roleIdList = document.getElementsByName("roleIdList")[0];
		var selRole = getcheckIds();
		roleIdList.value = '[' + selRole + ']';
		
		art.dialog.confirm("要保存当前数据吗？",
			function(){
				$("#roleForm").ajaxForm().ajaxSubmit(function(body){
					$("#roleTable").html(body);
	       		});
			}
		);
	    return false;
	}
	
			// 初始化树
		$(document).ready(function(){
			$.fn.zTree.init($("#deptTree"), setting, ${deptTree});
			$.fn.zTree.getZTreeObj("deptTree").expandAll(true);
		});
		
</script>